<!--
 * @Author: wangding
 * @Date: 2020-11-11 11:02:53
 * @LastEditTime: 2020-12-25 12:27:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\battery\battery.vue
-->
<template>
    <div class="battery-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('device.inverter.SN')}}</span>
                <el-input v-model="inverterSn" v-big style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('devWifi.wifiSN')}}</span>
                <el-input v-big v-model="wifiSn" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('sn.snStatus')}}</span>
                <el-select v-model="ackStatus" filterable :placeholder="$t('pleaseSelect')" clearable>
                    <el-option
                            v-for="item in ackStatusList"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <a href="javascript:;" style="color:#3c8dbc;" @click='()=>{$router.push({path:"/instructions"})}'>
                {{$t('group.returnInstructions')}}</a>
        </div>
        <baseTable v-loading="loading" row-key='sid' :data="dataRows" border stripe :column='column' :select='false'
                   @selection-change="handleSelectionChange($event)">
            <template #ackStatus="{data}">
                {{comm.returnCode(ackStatusList,data.ackStatus,'id','text')}}
            </template>
            <template #ratePower="{data}">
                {{data.ratePower && data.ratePower.toFixed(2)}}
            </template>
            <template #taskId="{data}">
                <span v-copy='data.taskId' :title="data.taskId">{{data.taskId | stringLength()}}</span>
            </template>
        </baseTable>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    import moment from 'moment'
    import baseTable from '../../../components/common/baseTable'

    export default {
        components: {
            baseTable
        },
        props: {},
        data() {
            return {
                ackStatusList: [{
                    id: '-1',
                    text: this.$t('group.noReturnData')
                }, {
                    id: '0',
                    text: this.$t('group.successMsg')
                }, {
                    id: '1',
                    text: this.$t('group.noResponse')
                }, {
                    id: '2',
                    text: this.$t('group.erroy')
                }],
                inverterSn: '',
                wifiSn: '',
                ackStatus: '',
                current: 1,
                size: 10,
                total: 1,
                loading: false,
                dataRows: [],
                column: [{
                    title: this.$t('device-group-name'),
                    value: 'groupName',
                    slot: 'groupName'
                },
                    {
                        title: this.$t('group.instructionsCurrent'),
                        value: 'taskId',
                        slot: 'taskId'
                    },
                    {
                        title: this.$t('login.wifiSN'),
                        value: 'wifiSn',
                        slot: 'wifiSn'
                    },
                    {
                        title: this.$t('devWifi.deviceSN'),
                        value: 'inverterSn',
                        slot: 'inverterSn'
                    },
                    {
                        title: this.$t('sn.snStatus'),
                        value: 'ackStatus',
                        slot: 'ackStatus'
                    }, {
                        title: this.$t('vsite.capacity'),
                        value: 'ratePower',
                        slot: 'ratePower'
                    },
                    {
                        title: this.$t('opttask.createTime'),
                        value: 'createTime',
                        slot: 'createTime'
                    },
                    {
                        title: this.$t('group.returnTime'),
                        value: 'ackTime',
                        slot: 'ackTime'
                    }],
                dictionary: {}
            };
        },
        computed: {},
        watch: {},
        created() {

        },
        mounted() {
            this.getDictionaryBatch()
            this.vppackGetPage()
        },
        methods: {
            async getDictionaryBatch() {
                let res = await this.API.getDictionaryBatch({
                    dictCodes: 'INVERTER_TYPES',
                    lang: localStorage.getItem('lang') || 'zh_CN'
                })
                this.dictionary = res || {}
            },
            async vppackGetPage() {
                this.loading = true
                let res = await this.API.vppackGetPage({
                    inverterSn: this.inverterSn,
                    wifiSn: this.wifiSn || '',
                    instructionId: this.$route.query.instructionId,
                    ackStatus: this.ackStatus,
                    current: this.current,
                    size: this.size
                })
                this.loading = false
                this.total = res.total
                this.dataRows = res.rows
            },
            handleCurrentChange(val) {
                this.current = val
                this.vppackGetPage()
            },
            handleSizeChange(val) {
                this.size = val
                this.current = 1
                this.vppackGetPage()
            },
            query() {
                this.current = 1
                this.vppackGetPage()
            }
        },
    };
</script>

<style lang="less" scoped>
    .battery-main-box {
        .hover-a-link:hover {
            text-decoration: underline;
        }
    }
</style>
